<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div>

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Fire Protection</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-book"></span>&nbsp;KPIs Formulas</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<div class="wrapper">
    <section class="row">
        <div class="col-sm-3" ng-controller="TreeCtrl">
            <div class="panel panel-info">
                <div class="panel-heading"><b> Org List</b></div>
                <div class="panel-body">
                    <form class="form" role="form">
                        <div class="form-group">
                            <!--<label for="searchField">Search</label>-->
                            <!-- <input name="search" placeholder="Filter...">-->
                            <input name="search" class="form-control" id="searchField" placeholder="Filter..."
                                   ng-model="searchText">
                            <button id="btnResetSearch" style="display: none">&times;</button>
                            <!--    <span id="matches"></span>-->
                        </div>
                    </form>
                    <div>
                        <div id="tree">
                        </div>
                    </div>
                </div>
                <!-- </div>-->
            </div>
        </div>
        <div class="col-sm-9">
            <div class="panel panel-info" ng-controller="tablectrl">

                <toaster-container toaster-options="{'time-out': 3000}"></toaster-container>
                <div class="panel-heading"><b> Fire Protection Department</b></div>
                <div class="panel-body">

                    <div class="span6 yearQuarterControlBar" ng-controller="ControlBarCtrl">

                        <div class="pull-right">
                            <button type="button" class="btn btn-success">Excel</button>

                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-toggle="dropdown">{{year}} <b
                                        class="caret"></b></button>
                                <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
                                    <li>
                                        <div class="row f4yeartable">
                                            <div class="col-md-12">
                                                <form class="form" role="form">
                                                    <div class="form-group">
                                                        <table ng-table="tableParams" show-filter="true"
                                                               class="table ng-table-rowselected">
                                                            <tr ng-repeat="year2 in $data"
                                                                ng-click="changeYearSelection(year2); year2.$selected = !year2.$selected; "
                                                                ng-class="{'active' : year2.$selected}">
                                                                <td data-title="'Key'" filter="{ 'key': 'text' }">
                                                                    {{year2.key}}
                                                                </td>
                                                                <td data-title="'Text'" filter="{ 'text': 'text' }">
                                                                    {{year2.text}}
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <input class="btn btn-success  sp" type="button" value="Ok"
                                               ng-click="setSelectedYear(tempSelctedYear)" style="width:49%">
                                        <input class="btn btn-primary  sp" type="button" value="Close"
                                               ng-click="cancelYearSelection()" style="width:49%" >
                                    </li>
                                </ul>


                            </div>

                            <div class="btn-group">

                                <button type="button" data-ng-click="setSelectedQuarter(item, $event)"
                                        class="btn btn-primary" ng-model="radioModel" btn-radio="'Q1'" value="1"> Q1
                                </button>
                                <button type="button" data-ng-click="setSelectedQuarter(item, $event)"
                                        class="btn btn-primary" ng-model="radioModel" btn-radio="'Q2'" value="2"> Q2
                                </button>
                                <button type="button" data-ng-click="setSelectedQuarter(item, $event)"
                                        class="btn btn-primary" ng-model="radioModel" btn-radio="'Q3'" value="3"> Q3
                                </button>
                                <button type="button" data-ng-click="setSelectedQuarter(item, $event)"
                                        class="btn btn-primary" ng-model="radioModel" btn-radio="'Q4'" value="4"> Q4
                                </button>
                            </div>
                        </div>


                    </div>
                    <div class="span6 firetable">
                        <table ng-table="tableParams" class="table">
                            <tbody ng-repeat="group in $groups" ng-show="rows.length > 0">
                            <tr class="ng-table-group">
                                <td>
                                    <a href="" ng-click="group.$hideRows = !group.$hideRows">
                                        <span class="glyphicon"
                                              ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                                        <strong>{{ getGroupText(group.value, groupsList) }}</strong>
                                    </a>

                                </td>
                                <td>
                                    <a href="" ng-click="group.$hideRows = !group.$hideRows" ng-show="showOrgKey != '' ">
                                        <strong>{{ getGroupValue(group.value, groupsList) }}</strong>
                                    </a>
                                </td>
                            </tr>
                            <tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
                                <td sortable="name" data-title="'Fire Protection Department'">
                                    {{user['ZEHFIRKPI__ZEHFIRKPI_TXT']}}
                                </td>
                                <td sortable="name" data-title="'Value'">
                                  {{user['4WMY63PQA3C718RMQ9AR0CZ8M']}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <footer class="footer">
        <div class="navbar navbar-default">
            <div class="container" style="width: 550px">
                <p class="navbar-text"> Copyright ©2014 Fire Protection Department</p>
                <a class="navbar-btn btn btn-danger pull-right">Contact Us</a>
            </div>
        </div>
    </footer>

</div>